<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>业务查询</el-breadcrumb-item>
      <el-breadcrumb-item>宽带查询</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图 -->
    <el-card>
      <el-row :gutter="20">
        <el-col :span="4">
          <el-input
            v-model="querInfo.searchinput"
            placeholder="请输入内容"
            clearable
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="searchBtn"
            ></el-button>
          </el-input>
        </el-col>
        <!-- 导入文件 -->
        <el-col :span="4">
          <el-popover placement="left" width="200" v-model="uploadshow">
            <el-upload
              :limit="(filenumber = 1)"
              accept=".xls, .xlsx"
              class="upload-demo"
              ref="upload"
              action="/hx/search/uppppoe"
              :headers="fileheaders"
              :file-list="fileList"
              :on-success="uploadsuccess"
              :on-progress="onupload"
              :auto-upload="false"
            >
              <el-button slot="trigger" size="small" type="primary"
                >选取文件</el-button
              >
              <el-button
                style="margin-left: 10px"
                size="small"
                type="success"
                @click="submitUpload"
                >上传到宽带</el-button
              >
              <div slot="tip" class="el-upload__tip">宽带查询文件上传</div>
            </el-upload>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="text" @click="uploadshow = false"
                >取消</el-button
              >
            </div>
            <el-button slot="reference">导入</el-button>
          </el-popover>
        </el-col>
      </el-row>
    </el-card>

    <el-table
      :data="tableData"
      style="width: 100%"
      :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }"
      border
    >
      <el-table-column label="#" type="index"></el-table-column>
      <el-table-column label="上传时间">
        <template v-slot="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{
            new Date(scope.row.inputdate).toLocaleDateString()
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="办理号码" prop="xlsx.办理号码"></el-table-column>
      <el-table-column
        label="业务办理日期"
        prop="xlsx.业务办理日期"
      ></el-table-column>
      <el-table-column label="办理人员" prop="xlsx.办理人员"></el-table-column>
      <el-table-column label="区域" prop="xlsx.区域"></el-table-column>
      <el-table-column
        label="宽带下单五级地址"
        prop="xlsx.宽带下单五级地址"
      ></el-table-column>
      <el-table-column label="下单工号" prop="xlsx.下单工号"></el-table-column>
      <el-table-column label="状态" prop="xlsx.状态"></el-table-column>
      <el-table-column label="失败原因" prop="xlsx.失败原因"></el-table-column>
      <el-table-column
        label="失败原因2"
        prop="xlsx.失败原因2"
      ></el-table-column>
      <el-table-column
        label="是否我司工号"
        prop="xlsx.是否我司工号"
      ></el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="querInfo.pagenum"
      :page-sizes="[20, 50, 100]"
      :page-size="querInfo.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      hide-on-single-page
    ></el-pagination>
  </div>
</template>

<script>
import { Loading } from 'element-ui'
export default {
  data() {
    return {
      // 查询条件
      querInfo: {
        // 页数
        pagenum: 1,
        // 每页数量
        pagesize: 100,
      },
      total: 0,
      // 上传显示
      uploadshow: false,
      //  给上传组件添加请求参数
      fileheaders: {
        Authorization: window.localStorage.getItem('token'),
      },
      // 选择的文件
      fileList: [],
      // loading实例对象
      loading: {},
      //   表格数据
      tableData: [],
    }
  },
  created() {
    this.searchpppoe()
  },
  methods: {
    //   搜索按钮
    searchBtn() {
      this.searchpppoe()
    },
    // 上传文件成功钩子
    uploadsuccess(response, file) {
      this.loading.close()
      if (response.meta.status !== 200) {
        return this.$message.error(response.meta.msg)
      }
      this.$message.success(response.meta.msg)
    },
    // 文件上传时钩子
    onupload() {
      this.loading = Loading.service({
        lock: true,
        text: '正在解析, 请勿操作!',
        fullscreen: true,
        background: 'rgba(0, 0, 0, 0.7)',
      })
    },
    //点击上传服务器
    submitUpload() {
      this.$refs.upload.submit()
    },
    // 获取宽带查询
    async searchpppoe() {
      const { data: res } = await this.$http.post(
        'hx/search/sppppoe',
        this.querInfo
      )
      if (res.meta.status !== 200) {
        return this.$message.error(res.meta.msg)
      }
      this.$message.success(res.meta.msg)
      this.tableData = res.data
      this.total = res.total
    },
    // 监听pagesize 改变的事件
    handleSizeChange(newSize) {
      this.querInfo.pagesize = newSize
      this.searchpppoe()
    },
    // 监听页码值 改变的事件
    handleCurrentChange(newPage) {
      this.querInfo.pagenum = newPage
      this.searchpppoe()
    },
  },
}
</script>
<style lang="less" scoped>
</style>